<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽高设置</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../bootstrap-icons-1.13.1/bootstrap-icons.min.css">
</head>
<body>
    <!--设置宽-->
    <div class="container">
        <div class="w-25 bg-primary">宽度25%</div>
        <div class="w-50 bg-danger">宽度50%</div>
        <div class="w-75 bg-secondary">宽度75%</div>
        <div class="w-100 bg-warning">宽度100%</div>
        <div class="w-auto bg-dark">自动设置宽</div>
        <div class="mw-100 bg-success">最大宽为100%</div>
        <hr>
        <!--设置高-->
      <div style="height: 300px">
          <div class="h-25 bg-primary">高度25%</div>
          <div class="h-50 bg-danger">高度50%</div>
          <div class="h-75 bg-secondary">高度75%</div>
          <div class="h-100 bg-warning">高度100%</div>
          <div class="h-auto bg-dark">自动设置高</div>
          <div class="mh-100 bg-success">最大高为100%</div>
      </div>
    </div>
</body>
</html>